<template>
  <div class="homepage-hero-module">

    <div class="video-container">

      <div :style="fixStyle" class="filter">
        <div style="height: 300px;width: 400px;position: relative;left: 50%;top: 30%;text-align: center">
          <h2 class="logo">
            “两违”整治遥感监管服务系统
          </h2>
          <v-layout align-center justify-center column>
            <v-card flat style="width:20rem;background: none">
              <v-text-field
                v-model="username"
                label="请输入用户名"
              ></v-text-field>
              <v-text-field
                v-model="password"
                :type="pwdShow ? 'text' : 'password'"
                label="请输入密码"
                :error-messages="loginFailed ? '用户名或密码错误':''"
                @keyup.enter="login()"
              ></v-text-field>
              <v-card-actions>
                <v-spacer/>
                <v-btn
                  color="primary"
                  @click="login()"
                >
                  登录
                </v-btn>
              </v-card-actions>
            </v-card>
          </v-layout>
        </div>
      </div>

      <video :style="fixStyle" autoplay loop class="fillWidth" v-on:canplay="canplay">
        <source src="../assets/Construction.mp4" type="video/mp4"/>
        浏览器不支持 video 标签，建议升级浏览器。
      </video>
      <div class="poster hidden" v-if="!vedioCanPlay">
        <img :style="fixStyle" src="../assets/Construction.jpg" alt="">
      </div>
    </div>
  </div>
</template>
<script>
  import Vue from 'vue'
  //import element from 'element-ui'
  //import '../assets/theme/element-#409eff/index.css'
  import qs from 'qs';
  //Vue.use(element)
  export default {
    name: 'login',
    data() {
      return {
        username: '',
        password: '',
        vedioCanPlay: false,
        fixStyle: '',
        pwdShow: false,
        loginFailed: false
      }
    },
    methods: {
      canplay() {
        this.vedioCanPlay = true
      },
      login () {
        if (!(this.username === '' || this.password === '')) {
          this.axios.post(this.$baseUrl + '/login', qs.stringify({
            username: this.username,
            password: this.password
          })).then((res) => {
            if(res.data.code=='201'){
              this.loginFailed = true;
                this.password=''
            }else{
              this.$store.state.userId = res.data.data.userId
              this.$store.state.userName = res.data.data.realName
              this.$store.state.roleName = res.data.data.roleName
              this.$store.state.deptName = res.data.data.deptName
              this.setCookie('userName', res.data.data.realName, 30)
              this.setCookie('roleName', res.data.data.roleName, 30)
              this.setCookie('deptName', res.data.data.deptName, 30)
              this.$router.push({path: '/'});
            }
          })
        }
      },
      setCookie: function (cname, cvalue, exdays) {
        var d = new Date()
        d.setTime(d.getTime() + (exdays * 60 * 1000))
        var expires = 'expires=' + d.toUTCString()
        document.cookie = cname + '=' + escape(cvalue) + '; ' + expires
      },
      getCookie: function (cname) {
        var name = cname + '='
        var ca = document.cookie.split(';')
        for (var i = 0; i < ca.length; i++) {
          var c = ca[i]
          while (c.charAt(0) === ' ') c = c.substring(1)
          if (c.indexOf(name) !== -1) return unescape(c.substring(name.length, c.length))
        }
        return ''
      },
    },
    mounted: function () {
      window.onresize = () => {
        const windowWidth = document.body.clientWidth
        const windowHeight = document.body.clientHeight
        const windowAspectRatio = windowHeight / windowWidth
        let videoWidth
        let videoHeight
        if (windowAspectRatio < 0.5625) {
          videoWidth = windowWidth
          videoHeight = videoWidth * 0.5625
          this.fixStyle = {
            height: windowWidth * 0.5625 + 'px',
            width: windowWidth + 'px',
            'margin-bottom': (windowHeight - videoHeight) / 2 + 'px',
            'margin-left': 'initial'
          }
        } else {
          videoHeight = windowHeight
          videoWidth = videoHeight / 0.5625
          this.fixStyle = {
            height: windowHeight + 'px',
            width: windowHeight / 0.5625 + 'px',
            'margin-left': (windowWidth - videoWidth) / 2 + 'px',
            'margin-bottom': 'initial'
          }
        }
      }
      window.onresize()
    }
  }
</script>
<style scoped>
  .homepage-hero-module,
  .video-container {
    position: relative;
    height: 100vh;
    overflow: hidden;
  }

  .video-container .poster img,
  .video-container video {
    z-index: 0;
    position: absolute;
  }

  .video-container .filter {
    z-index: 1;
    position: absolute;
    background: rgba(0, 0, 0, 0.4);
  }

  .logo {
    height: 60px;
    font-size: 26px;
    padding-top: 12px;
    padding-left: 15px;
    padding-right: 15px;
    border-color: rgba(238, 241, 146, 0.3);
    text-decoration: none;
    color: #FFF;
    /*border-right-width: 1px;*/
    /*border-right-style: solid;*/
  }
</style>

